<template>
  <div class="container">
      <h2 class="handle-title">系统管理 > 功能管理</h2>
      <div class="fun_main">
        <div class="fun_left">
          <div v-for="item in datalist" v-if="item.funtype == 0">
            <p @click="clickNode(item)">{{item.funname}}</p>
            <div class="item1" v-for="item1 in datalist" v-if="item1.funtype == 1 &&item1.funpid == item.funid">
              <p @click="clickNode(item1,item)">{{item1.funname}}</p>
              <div class="item2" v-for="item2 in datalist" v-if="item2.funtype == 2 &&item2.funpid == item1.funid">
                <p @click="clickNode(item2,item1)">{{item2.funname}}</p>
                <div class="item3" v-for="item3 in datalist" v-if="item3.funtype == 3 &&item3.funpid == item2.funid">
                  <p @click="clickNode(item3,item2)">{{item3.funname}}</p>
                </div>
              </div>
            </div>
          </div>
          <el-button type="text" @click="addInsert" style="font-size:16px;margin:15px 0 0 29%">增加子系统</el-button>  
        </div>
        <div class="fun_right">
          <el-form :label-position="labelPosition" label-width="100px" :model="formData">
            <el-form-item label="父功能名字">
              <el-input v-model="formData.funnames" disabled></el-input>
            </el-form-item>
            <el-form-item label="父节点ID"  style="display:none">
              <el-input v-model="formData.funpid"></el-input>
            </el-form-item>
            <el-form-item label="功能名字">
              <el-input v-model="formData.funname"></el-input>
            </el-form-item>
            <el-form-item label="功能图标">
              <!-- 上传 -->
              <el-input v-model="formData.funicon" style="width:192px"></el-input>
              <el-link type="primary" 
                style="margin-left:10px" 
                href="https://element.eleme.cn/#/zh-CN/component/icon" 
                target="_blank"
                title="请把图标名字复制到输入框，例如：el-icon-user-solid">
                获取图标名字
              </el-link>
            </el-form-item> 
            <el-form-item label="功能排序">
              <el-select v-model="formData.funsort" placeholder="请选择顺序">
                <el-option label="1" value="1"></el-option>
                <el-option label="2" value="2"></el-option>
                <el-option label="3" value="3"></el-option>
                <el-option label="4" value="4"></el-option>
                <el-option label="5" value="5"></el-option>
                <el-option label="6" value="6"></el-option>
                <el-option label="7" value="7"></el-option>
                <el-option label="8" value="8"></el-option>
                <el-option label="9" value="9"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="功能状态">
              <el-select v-model="formData.funstate" placeholder="请选择状态">
                <el-option label="可用" value="1"></el-option>
                <el-option label="不可用" value="0"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="功能类型">
              <el-input v-model="name" disabled></el-input>
              <el-input v-model="formData.funtype" style="display:none"></el-input>
              <el-input v-model="formData.funid" style="display:none"></el-input>
            </el-form-item>
            <el-form-item label="功能地址">
              <el-input v-model="formData.funurl"></el-input>
            </el-form-item>
            <el-form-item label="功能说明">
              <el-input v-model="formData.fundesc" type="textarea"></el-input>
            </el-form-item>
            <el-form-item label-width="56px">
              <el-button class="query_btn" type="primary" @click="goAddNode" :disabled="disabled">新增子节点</el-button>
              <el-button class="query_btn" type="primary" @click="goSubmit" v-show="show">保存</el-button>
              <el-button class="query_btn" type="primary" @click="goUpdate" v-show="!show">修改</el-button>
              <el-button class="query_btn" type="primary" @click="goBack">取消</el-button>
            </el-form-item>
            
          </el-form>
        </div>
      </div>
  </div>
</template>

<script>
import { getFunList } from "../../api/public/api";
import { funInsert } from "../../api/public/api";
import { funUpdate } from "../../api/public/api";
export default {
  name: '',
  data() { 
    return {
      datalist:[],
      labelPosition:"right",//对齐方式
      formData:{
        fundesc:"",
        funicon:"",
        funname:"",
        funnames:"",
        funpid:0,
        funsort:"1",
        funstate:"1",
        funtype:"",
        funurl:"",
        funid:""
      },
      name:"",
      disabled:true,
      show:false
    }
  },
  mounted() {
    //获取全部系统功能(参数为空)
    this.getdata()
  },
  methods:{
    //功能树 点击功能
    clickNode(...value){
      // console.log(value)
      this.show = false;
      this.formData = value[0]
      this.formData.funstate = value[0].funstate+""
      if(value[0].funtype == 0){
        this.formData.funnames = "无";
        this.name = "子系统"
        this.disabled = false;
      }else if(value[0].funtype == 1){
        this.formData.funnames = value[1].funname
        this.name = "目录"
        this.disabled = false;
      }else if(value[0].funtype == 2){
        this.formData.funnames = value[1].funname
        this.name = "菜单"
        this.disabled = false;
      }else if(value[0].funtype == 3){
        this.formData.funnames = value[1].funname
        this.name = "接口"
        this.disabled = true;
      }
    },
    //返回上一级
    goBack() {
      this.$router.go(-1);
    },
    //点击新增子节点功能
    goAddNode(){
      this.formData = {
        funnames:this.formData.funname,
        funpid:this.formData.funid,
        funtype:this.formData.funtype + 1,
        funstate:"1"
      }
      if(this.formData.funtype == 1){
        this.name = "目录"
      }else if(this.formData.funtype == 2){
        this.name = "菜单"
      }else if(this.formData.funtype == 3){
         this.name = "接口"
      }
      this.show = true
      console.log(this.formData)
    },
    //功能新增
    goSubmit(){
      console.log(this.formData)
      let that = this;
      let formData = new FormData();
      formData.append("fundesc",this.formData.fundesc);
      formData.append("funicon",this.formData.funicon);
      formData.append("funname",this.formData.funname);
      formData.append("funpid",this.formData.funpid);
      formData.append("funsort",this.formData.funsort);
      formData.append("funstate",this.formData.funstate);
      formData.append("funtype",this.formData.funtype);
      formData.append("funurl",this.formData.funurl);
      funInsert(formData).then((res)=>{
        // console.log(res)
        if(res.data.code == 1){
          window.location.href = "/fun"
        }else{
          that.$message({
            message:"保存失败",
            type:"info"
          })
        }
      })
    },
    //功能修改
    goUpdate(){
      let that = this;
      let formData = new FormData();
      formData.append("fundesc",this.formData.fundesc);
      formData.append("funicon",this.formData.funicon);
      formData.append("funname",this.formData.funname);
      formData.append("funsort",this.formData.funsort);
      formData.append("funstate",this.formData.funstate);
      formData.append("funid",this.formData.funid);
      formData.append("funurl",this.formData.funurl);
      console.log(this.formData)
      funUpdate(formData).then((res)=>{
        // console.log(res.data.code)
        if(res.data.code == 1){
          window.location.href = "/fun"
        }else{
          that.$message({
            message:"修改失败",
            type:"info"
          })
        }
      })
    },
    //增加子系统功能
    addInsert(){
      this.formData = {
        funnames:"无",
        funname:"",
        funtype:0,
        funstate:"1",
        funpid:"-1"
      }
      this.name = "子系统";
      this.show = true
    },
    //封装获取数据
    getdata(){
      let params ={}
      getFunList(params).then((res)=>{
        this.datalist = res.data.datalist
        // console.log(this.datalist)
      })
    }
  },
 }
</script>

<style scoped>
.container{
  padding-bottom: 20px;
}
.fun_main{
  display: flex;
  flex-direction: row;
}
.fun_left{
  width: 20%;
  height: auto;
  font-size: 18px;
  font-weight: bold;
  border-right: 1px solid #ccc;
}
.fun_left p{
  line-height: 25px;
  cursor: pointer;
}
.fun_left p:hover{
  color: #409EFF;
}
.fun_right{
  width: 80%;
  height: auto;
}
.item1,.item2,.item3{
  padding-left: 20px;
}
.item1{
  font-size: 16px;
  font-weight: bold;
}
.item2{
  font-size: 14px;
  font-weight: bold;
}
.item3{
  font-weight: normal;
}
.query_btn{
  width: 120px;
}
.el-form{
  width: 500px;
}
</style>